<template>
  <div class="wrap">
      <el-card class="card-box">
        <!--
          1.formData：
            说明: form 表单绑定的值
            类型：Object
            案例：
            formData: {
               name: 1,
            }
          2.formArr
            说明: 文本框的 label
            类型：Array
            案例：
            formArr: [{
                type: 'select',
                label: '筛选类型',
                prop: 'type',
                placeholder: '全部',
                optionLabelName: 'label',
                optionValueName: 'type',
                closeClearable: true
              }]
          3.btnArr
            说明: 按钮
            类型：Array
            案例：
            btnArr: [
              { label: '查询', type: 'primary', handle: () => this.handleSearch() }
            ]
          4.inline
           说明: 是否是行内表单
           类型：Boolean
           案例，
           :inline='true'
         5.formWidth
           说明:整个表单的宽度
           类型：String
           案例，
           :formWidth='formWidth', data 中定义 formWidth:200
        6.
      -->
        <fr-form
         ref="formData"
         form-name="formData"
        :form-data="formData"
        :form-arr="formArr"
        :labelWidth="labelWidth"
        :btn-arr="btnArr"
        :inline='false'
        :rules="formRules"
        :formWidth='formWidth'
        />
      </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formWidth: '200',
      labelWidth: '100px',
      size: 'medium',
      formData: {
        select: '',
        input: '',
        textarea: '',
        number: '',
        tel: '',
        password: '',
        radio: 0,
        radioButton: 0,
        checkbox: ['北京'],
        cascader: '',
        date: '',
        switch: '',
        // img: '',
        tinymce: ''
      },
      btnArr: [
        { label: '确认', type: 'primary', handle: () => this.handleSearch('formData') },
        { label: '重置', type: 'success', handle: () => this.handleReset('formData') },
        { label: '刷新', type: 'plain', handle: () => this.handleFresh() }
      ],
      formArr: [
        {
          type: 'divider',
          title: '标题栏'
        },
        { type: 'select',
          label: 'select',
          prop: 'select',
          placeholder: '全部',
          optionLabelName: 'label',
          optionValueName: 'value',
          closeClearable: true,
          disabled: () => this.disabled(),
          change: () => this.selectChange(),
          visibleChange: () => this.visibleChange(),
          options: () => this.initSelectValue()
        },
        { type: 'input',
          label: 'input',
          childWidth: '220px',
          prop: 'input',
          placeholder: '请输入',
          handle: () => this.backEnter(),
          closeClearable: true
        },
        {
          type: 'textarea',
          label: 'textarea',
          prop: 'textarea',
          childWidth: '420px',
          placeholder: '请输入',
          optionLabelName: 'label',
          maxlength: '10',
          closeClearable: true
        },
        {
          type: 'number',
          label: 'number',
          prop: 'number',
          placeholder: '请输入',
          childWidth: '420px'
        },
        {
          type: 'tel',
          label: 'tel',
          prop: 'tel',
          placeholder: '请输入',
          maxlength: 11,
          change: () => this.telChange(),
          childWidth: '420px'
        },
        {
          type: 'password',
          label: 'password',
          prop: 'password',
          placeholder: '请输入',
          maxlength: 11,
          childWidth: '420px'
        },
        {
          type: 'radio',
          label: 'radio',
          prop: 'radio',
          radios: [
            {
              label: '北京',
              value: 0
            },
            {
              label: '上海',
              value: 1
            },
            {
              label: '广州',
              value: 2
            },
            {
              label: '深证',
              value: 3
            }
          ],
          change: (e) => this.radioChange(e)
        },
        {
          type: 'radioButton',
          label: 'radioButton',
          prop: 'radioButton',
          radios: [
            {
              label: '北京',
              value: 0
            },
            {
              label: '上海',
              value: 1
            },
            {
              label: '广州',
              value: 2
            },
            {
              label: '深证',
              value: 3
            }
          ],
          change: (e) => this.radioButtonChange(e)
        },
        {
          type: 'checkbox',
          label: 'checkbox',
          prop: 'checkbox',
          childWidth: '420px',
          change: (e) => this.CheckButtonChange(e),
          checkboxs: this.checkBoxList()
        },
        {
          type: 'cascader',
          prop: 'cascader',
          label: 'Cascader',
          placeholder: '请选择',
          childWidth: '300px',
          options: () => this.CascaderOptions(),
          change: () => this.cascaderChange()
        },
        {
          type: 'date',
          prop: 'date',
          label: 'date',
          placeholder: '请选择',
          childWidth: '300px'
        },
        {
          type: 'switch',
          prop: 'switch',
          label: 'switch',
          placeholder: '请选择'
        },
        {
          type: 'tinymce',
          label: 'tinymce',
          prop: 'tinymce',
          childWidth: '300px'
        }
      // {
      //   type: 'img',
      //   prop: 'img',
      //   limit: 1,
      //   label: 'img',
      //   remark: '',
      //   placeholder: '请选择'
      // }
      ],
      formRules: {
        select: [ { required: true, message: '请选择', trigger: 'change' } ],
        input: [ { required: true, message: '请输入', trigger: 'change' } ],
        textarea: [ { required: true, message: '请输入', trigger: 'change' } ],
        number: [ { required: true, message: '请输入', trigger: 'change' } ],
        tel: [ { required: true, message: '请输入', trigger: 'change' } ],
        password: [ { required: true, message: '请输入', trigger: 'change' } ],
        radio: [ { required: true, message: '请选择', trigger: 'change' } ],
        radioButton: [ { required: true, message: '请选择', trigger: 'change' } ],
        checkbox: [ { required: true, message: '请选择', trigger: 'change' } ],
        cascader: [ { required: true, message: '请选择', trigger: 'change' } ],
        date: [ { required: true, message: '请选择', trigger: 'change' } ],
        tinymce: [ { required: true, message: '请输入', trigger: 'change' } ],
        img: [ { required: true, message: '请选择', trigger: 'change' } ]
      },
      checkBox: [{
        label: '北京',
        value: 0
      },
      {
        label: '上海',
        value: 1
      }]
    }
  },
  methods: {
    // 查询
    async handleSearch (formData) {
      if (await this.$refs.formData.validate(formData)) {
        console.log('表单数据', this.formData)
        this.$success('验证通过过')
      } else {
        this.$error('验证失败')
      }
    },
    // 下拉框数据
    initSelectValue () {
      return [
        { label: '订阅号', value: 'subscribe' },
        { label: '服务号', value: 'server' }
      ]
    },
    // 下拉框出现/隐藏时触发,出现则为 true，隐藏则为 false
    visibleChange () {
      this.$success('下拉框触发')
    },
    // 下拉框 发生改变
    selectChange () {
      this.$success('下拉框改变触发')
    },
    // tel 发生改变
    telChange () {
      this.$success('手机狂变动输入')
    },
    // 单选
    radioChange (e) {
      console.log('单选按钮', e)
      this.$success('单选按钮')
    },
    // 单选按钮
    radioButtonChange (e) {
      console.log('radioButtonChange', e)
    },
    // 复选框数据
    checkBoxList () {
      return [{
        label: '北京',
        value: 0
      },
      {
        label: '上海',
        value: 1
      }]
    },
    // 复选框的值改变
    CheckButtonChange (e) {
      console.log('复选框的值改变', e)
    },
    // 级联数据
    CascaderOptions () {
      return [
        {
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }
      ]
    },
    // 级联选择器z
    cascaderChange (e) {
      console.log('级联选择器--cascaderChange', e)
    },
    // 刷新
    handleFresh () {
      this.$success('刷新')
      /* 强制刷新
         this.$router.go(0)
      */
    },
    // 重置
    handleReset (formName) {
      this.$refs[formName].resetForm()
      this.$success('重置')
    },
    // 是否重置
    disabled () {
      return false
    },
    // 输入框回车键
    backEnter () {
      this.$success('你点击了 Enter 键')
    }
  }
}
</script>

<style scoped lang="less">
.wrap{
  height: 200px;
}

</style>
